<template>
    <div class="carAdditionalLoan">
        <Alert type="success">车款+附加贷</Alert>
        <Form ref="carAdditioalLoanForm" :model="carAdditioalLoanForm" :rules="carAdditioalLoanFormValiate" :label-width="100">
            <div class="common_content" style="padding: 0px;">
                 <Row>
                    <Col>
                        <FormItem label="车辆价格(元)" prop="carPrice">
                            <Input v-model="carAdditioalLoanForm.carPrice"
                             placeholder=""
                             :readonly="false"
                             @on-change="inputPrice()"
                             :disabled="isShowDetails||isDisabled"
                             class="w200"
                             />
                        </FormItem>
                    </Col>
                    <Col>
                        <common-finance
                        :isShowDetails="isShowDetails"
                        :financeForm="carAdditioalLoanForm"
                        :isAdditional="isAdditional"
                        :isSubProduct="isSubProduct"
                        :selectProductInfo="selectProductInfo"
                        :queryCarProductInfo="queryCarProductInfo"
                        :financeFormValiate="carAdditioalLoanFormValiate"
                        :isDisabled="isDisabled"
                        ></common-finance>
                    </Col>
                    <common-ele-loan
                    :loanForm="carAdditioalLoanForm"
                    :loanFormOld="carAdditioalLoanFormOld"
                    :isShowDetails="isShowDetails"
                    :monthPay="carMonthPay"
                    :discount="carDiscount"
                    :interest="carTotalInterest"
                    :loanFormValiate="carAdditioalLoanFormValiate"
                    :selectProdInfo="selectProductInfo"
                    :queryProdInfo="queryCarProductInfo"
                    :applyNo="applyNo"
                    :isAppear="isAppear"
                    :uuid="uuid"
                    :isTail="isCarTail"
                    :prodId="mainProductId"
                    :isDisabled="isDisabled"
                    @isChange="isChange"
                    @validateSingle="validateSingle"
                    :discountOption="carDiscountOption"
                    :diver="diverType"
                    ref="carAdditioalEl"
                     ></common-ele-loan>
                </Row>
            </div>
        </Form>
    </div>
</template>
<script>
import * as utils from '_p/afs-apply/assets/js/utils.js'
import vueEvent from "_p/afs-apply/assets/js/vueEvent.js"
import CommonEleLoan from "../common-ele-loan/commonEleLoan.vue"
import CommonFinance from "../common-finance/common-finance"
export default {
    name:"carLoan",
    data(){
        return{
            diverType:"carAdd",
            carAdditioalLoanForm:{
                carPrice:this.carPrice,
                additionalTotalAmt:"",
                //项目融资列表
                additionalAmtList:[
                ],
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
                maxDisCountAmt:"",
                discountType:"",
                discountTotalAmt:"",
                payRate:"",
                loadList:[
                ],
                settleRate:"",
           },
           carAdditioalLoanFormValiate:{
           },
            //留痕
            carAdditioalLoanFormOld:{
                carPrice:"",
                additionalTotalAmt:"",
                //项目融资列表
                additionalAmtList:[
                ],
                loanLimit:0,
                downPayScale:"",
                downPayAmt:"",
                tailPayScale:"",
                tailPayAmt:"",
                loanAmt:"",
                custRate:"",
                monthPayAmt:"",
                totalInterest:"",
               /* maxDisCountAmt:"",*/
                discountType:"",
               /* discountTotalAmt:"",*/
                payRate:"",
            },
        }
    },
    computed:{

    },
    components:{
        CommonFinance,
        CommonEleLoan
    },
    props:{
        selectProductInfo:{
            type:Object,
        },
        queryCarProductInfo:{
            type:Object,
        },
        isCarTail:{
            type:Boolean
        },
        uuid:{
            type:String,
        },
        carPrice:{
            type:String,
        },
        isAppear:{
            type:Boolean
        },
        isShowDetails:{
            type:Boolean,
        },
        isSubProduct:{
            type:String,
        },
        isAdditional:{
            type:String
        },
        mainProductId:{
            type:String
        },
        applyNo:{
            type:String
        },
        isDisabled:{
            type:Boolean
        },
        carDiscountOption:{
            type:String,
        },
        // totalInfoData:{
        //     type:Object
        // },
        carMonthPay:{
            type:Number
        },
        carDiscount:{
            type:Number
        },
        carTotalInterest:{
            type:Number
        }
    },
    watch:{
        carPrice(val){
            if(val){
                this.carAdditioalLoanForm.carPrice=val;
            }
        },
        queryCarProductInfo(val){
            if(Object.keys(val).length>0){
                //input的必输类型为string
                this.carAdditioalLoanForm.carPrice=val.costInfo.contractAmt.toString();

                if(val.costInfo.addAmt){

                    this.carAdditioalLoanForm.additionalTotalAmt=val.costInfo.addAmt.toString();
                }
                if(val.costInfoOld){
                    this.carAdditioalLoanFormOld=val.costInfoOld
                }else{
                    this.carAdditioalLoanFormOld=val.costInfo
                }
            }
        },
        'carAdditioalLoanForm.additionalTotalAmt':function(val){
            this.inputPrice()
            vueEvent.$emit('to-additionalPrice',val,this.uuid);
        },
        "carAdditioalLoanForm.carPrice":{
            immediate: true,
            handler(val){
                vueEvent.$emit('to-carPrice',val,this.uuid);
            }
        },
        "carAdditioalLoanForm.downPayAmt":{
            handler(val){
                vueEvent.$emit('to-carDownPayAmt',val,this.uuid);
            }
        },
        "carAdditioalLoanForm.loanAmt":{
            handler(val){
                vueEvent.$emit('to-carLoanAmt',val,this.uuid);
            }
        }
    },
    created(){
    },
    mounted(){
        let self=this;
        vueEvent.$on('to-totalLoanAmt',function(data,id,total,operFlag){
            if(id==self.uuid){
                if(self.isAdditional=="1"&&self.isSubProduct=="0"){
                    self.carAdditioalLoanForm.loanAmt=data;
                    self.$refs.carAdditioalEl.inputLoanAmt(data,operFlag);
                }
            }
        })
    },
    beforeDestroy () {
        vueEvent.$off("to-totalLoanAmt");
    },
    methods:{
        validateSingle(type){
             this.$refs.carAdditioalLoanForm.validateField(type);
        },
        // 输入车辆价格或附加金额
        inputPrice(){
            if(utils.isTwoDicmal(this.carAdditioalLoanForm.carPrice)&&utils.isTwoDicmal(this.carAdditioalLoanForm.additionalTotalAmt)){
                if(this.carAdditioalLoanForm.downPayScale){
                    this.$refs.carAddEle.inputPayScale('downPayScale')
                }
                if(this.carAdditioalLoanForm.tailPayScale){
                    this.$refs.carAddEle.inputPayScale('tailPayScale')
                }
            }
        },
        isChange(val){
            this.$emit('isChange',val);
        },
        isDeal() {
            this.$refs.carAdditioalEl.isDeal();
        },
        submitCarAddLoan(){
            let carAddValiate=false;
            this.$refs.carAdditioalLoanForm.validate((valid) => {
                if(valid){
                    carAddValiate=valid;
                }else{
                    carAddValiate=false;
                }
            })
            if(carAddValiate){
                 return this.carAdditioalLoanForm
            }else{
                return false;
            }
        },
        // 清空数据
        resetCarAddLoan(){
            this.$refs["carAdditioalLoanForm"].fields.forEach(function (e) {
                if (e.prop !="carPrice") {
                    e.resetField()
                }
            })
            this.carAdditioalLoanForm.carPrice=this.carPrice;
        }
    }
}
</script>
<style scoped>
.term span{
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    line-height: 20px;
    margin-left: 5px;
    text-align: center;
    cursor: pointer;
}
.term span>i{
    font-style: normal;
    height: 20px;
    width: 20px;
    display: inline-block;
}
.term span.active>i,.term span>i:hover{
    background: #0D8EF5;
    color: white;
}
.w400{
    width: 400px;
}
.carAdditionalLoan .ivu-col{
    width: 33.3%;
    float: left;
}
</style>
